{% extends 'base.html' %}
{% load static %}

{% block title %}报表管理{% endblock %}

{% block extra_css %}
<style>
    .report-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        height: 100%;
    }
    .report-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    .report-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
        margin: 0 auto 20px;
    }
    .report-card .card-body {
        padding: 30px 20px;
        text-align: center;
    }
    .report-card .card-title {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 15px;
        color: #2c3e50;
    }
    .report-card .card-text {
        color: #6c757d;
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 25px;
    }
    .report-btn {
        border-radius: 25px;
        padding: 10px 25px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 0.85rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-chart-line me-2"></i>报表管理</h2>
                <div class="text-muted">
                    <small>选择需要查看的报表类型</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- 资产报表 -->
        <div class="col-lg-4 col-md-6">
            <div class="card report-card">
                <div class="card-body">
                    <div class="report-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                        <i class="fas fa-boxes"></i>
                    </div>
                    <h5 class="card-title">资产报表</h5>
                    <p class="card-text">查看和导出资产详细信息，支持按类别、状态、部门等条件筛选统计。</p>
                    <a href="{% url 'assets:asset_report' %}" class="btn btn-primary report-btn">
                        <i class="fas fa-chart-bar me-1"></i>查看报表
                    </a>
                </div>
            </div>
        </div>

        <!-- 折旧报表 -->
        <div class="col-lg-4 col-md-6">
            <div class="card report-card">
                <div class="card-body">
                    <div class="report-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h5 class="card-title">折旧报表</h5>
                    <p class="card-text">查看资产折旧情况，了解资产价值变化和折旧计算详情。</p>
                    <a href="{% url 'assets:depreciation_report' %}" class="btn btn-danger report-btn">
                        <i class="fas fa-calculator me-1"></i>查看报表
                    </a>
                </div>
            </div>
        </div>

        <!-- 分析仪表板 -->
        <div class="col-lg-4 col-md-6">
            <div class="card report-card">
                <div class="card-body">
                    <div class="report-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                        <i class="fas fa-tachometer-alt"></i>
                    </div>
                    <h5 class="card-title">分析仪表板</h5>
                    <p class="card-text">综合数据分析和可视化展示，包括资产、维修、库存等统计。</p>
                    <a href="{% url 'assets:analytics_dashboard' %}" class="btn btn-info report-btn">
                        <i class="fas fa-chart-pie me-1"></i>查看仪表板
                    </a>
                </div>
            </div>
        </div>

        <!-- 资产分析 -->
        <div class="col-lg-4 col-md-6">
            <div class="card report-card">
                <div class="card-body">
                    <div class="report-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
                        <i class="fas fa-chart-area"></i>
                    </div>
                    <h5 class="card-title">资产分析</h5>
                    <p class="card-text">深入分析资产使用情况、价值分布和趋势变化。</p>
                    <a href="{% url 'assets:asset_analytics' %}" class="btn btn-warning report-btn">
                        <i class="fas fa-analytics me-1"></i>查看分析
                    </a>
                </div>
            </div>
        </div>

        <!-- 维修分析 -->
        <div class="col-lg-4 col-md-6">
            <div class="card report-card">
                <div class="card-body">
                    <div class="report-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h5 class="card-title">维修分析</h5>
                    <p class="card-text">维修成本统计、维修频率分析和维修趋势报表。</p>
                    <a href="{% url 'assets:maintenance_analytics' %}" class="btn btn-success report-btn">
                        <i class="fas fa-wrench me-1"></i>查看分析
                    </a>
                </div>
            </div>
        </div>

        <!-- 库存分析 -->
        <div class="col-lg-4 col-md-6">
            <div class="card report-card">
                <div class="card-body">
                    <div class="report-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
                        <i class="fas fa-warehouse"></i>
                    </div>
                    <h5 class="card-title">库存分析</h5>
                    <p class="card-text">库存状态分析、消耗趋势和库存周转率统计。</p>
                    <a href="{% url 'assets:inventory_analytics' %}" class="btn btn-secondary report-btn">
                        <i class="fas fa-boxes me-1"></i>查看分析
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 快速导出 -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-download me-2"></i>快速导出</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <a href="{% url 'assets:export_analytics_data' %}?type=assets" class="btn btn-outline-primary w-100">
                                <i class="fas fa-file-excel me-2"></i>导出资产报表
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a href="{% url 'assets:export_analytics_data' %}?type=maintenance" class="btn btn-outline-success w-100">
                                <i class="fas fa-file-excel me-2"></i>导出维修报表
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a href="{% url 'assets:export_analytics_data' %}?type=inventory" class="btn btn-outline-warning w-100">
                                <i class="fas fa-file-excel me-2"></i>导出库存报表
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}